<template>
  <div class="voucher">
    <v-navbar></v-navbar>
    <div class="voucher-wrapper">
      <div class="v-item" v-for="item in voucher" :key="item.id">
        <img :src="item.icon" width="60" height="60" alt="">
        <div class="v-content">
          <div class="v-num">数量：{{item.num}}</div>
          <div class="v-sp">{{item.text}}</div>
          <div class="v-time">{{item.time}}</div>
        </div>
        <div class="Use" @click="_goPage(item.path)">
          <span>去使用</span>
        </div>
        <div class="lint">
          <div class="dao"></div>
          <div class="zhen"></div>
          <div class="x-lint"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VNavbar from '@c/navbar/navbar'
  import { mapState, mapMutations } from 'vuex'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
  import auctionTitle from './titlelist'
  import against from './against.png'
  import light from './light.png'
  import meal from './meal.png'
  import through from './through.png'

  export default {
    name: 'Voucher',
    data() {
      return {
        auctionTitle,
        navIndex: '1',
        voucher: [
          {
            icon: against,
            num: 222,
            text: '兑换区专用',
            time: '注：由餐厅消费产生',
            path: '/exchange'
          },
          {
            icon: light,
            num: 222,
            text: '轻奢品区专用',
            time: '注：由旅游区消费产生',
            path: '/entryLux'
          },
          {
            icon: meal,
            num: 222,
            text: '餐厅专用',
            time: '注：由轻奢品区消费产生',
            path: ''
          },
          {
            icon: through,
            num: 222,
            text: '通用',
            time: '注：由秒通提供',
            path: '/home'
          },
        ],
      }
    },
    components: {
      VNavbar,
    },
    computed: {
      ...mapState(['wtitle', 'rback']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'REVISE', 'LOADDING']),
      /**
       * 获得卡劵信息
       * @private
       */
      _getVoucher() {
        let info = {
          userId: window.localStorage.getItem('userId')
        }
        tokenPost(tokenLink.voucher, info).then(re => {
          if (re.status === 0) {
            this.voucher[0].num = re.data.exchangeVoucher
            this.voucher[1].num = re.data.luxuryVoucher
            this.voucher[2].num = re.data.restaurantVoucher
            this.voucher[3].num = re.data.currencyVoucher
          } else {
            this.$Message.error(re.msg)
          }
        })
      },
      /**
       * 跳转页面
       * @param path
       * @private
       */
      _goPage(path) {
        if (path === '') {
          this.$Message.info('敬请期待')
          return
        }
        this.$router.push(path)
      }
    },
    created() {
      this.WTITLE('卡劵')
      this.RBACK(true)
      this._getVoucher()
    },
  }
</script>

<style scoped>
  .voucher {
    padding-top: 45px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #f6f6f6;
  }

  .voucher .voucher-wrapper {
    margin: 10px 8px;
    padding: 20px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;
  }

  .voucher .voucher-wrapper .v-item {
    position: relative;
    display: flex;
    padding: 15px 0 12px 10px;
    margin-top: 10px;
    background-color: #FFF6F1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 0;
  }

  .voucher .voucher-wrapper .v-item:first-child {
    margin: 0;
  }

  .voucher .voucher-wrapper .v-item .v-content {
    flex: 1;
    margin-left: 15px;
    vertical-align: top;
  }

  .voucher .voucher-wrapper .v-item .v-content .v-num {
    line-height: 18px;
    font-size: 16px;
    color: #FC414E;

  }

  .voucher .voucher-wrapper .v-item .v-content .v-sp {
    margin: 6px 0;
    line-height: 14px;
    font-size: 14px;
    color: #202020;
  }

  .voucher .voucher-wrapper .v-item .v-content .v-time {
    line-height: 10px;
    font-size: 10px;
    color: #7E7E7E;
  }

  .voucher .voucher-wrapper .v-item .Use {
    display: flex;
    flex: 0 0 80px;
    width: 80px;
    align-items: center;
    justify-content: center;
  }

  .voucher .voucher-wrapper .v-item .Use > span {
    display: flex;
    width: 54px;
    height: 25px;
    font-size: 13px;
    background-color: #FC414E;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
  }

  .voucher .voucher-wrapper .v-item .lint {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    right: 80px;
    height: 100%;
    justify-content: space-between;
  }
  .voucher .voucher-wrapper .v-item .lint .dao {
    width:0;
    height:0;
    border-width:5px 5px 0;
    border-style:solid;
    border-color:#ffffff transparent transparent;
    position: relative;
    z-index: 100;
  }

  .voucher .voucher-wrapper .v-item .lint .zhen {
    width:0;
    height:0;
    border-width:0 5px 5px;
    border-style:solid;
    border-color:transparent transparent #ffffff;
    position: relative;
    z-index: 100;
  }

  .voucher .voucher-wrapper .v-item .lint .x-lint {
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px dashed #D6C69F;
    height: 100%;
    z-index: 0;
  }
</style>
